<!-- 
  @name: 支付成功/开始加注
  @date: 2020.3.2
 -->
<template>
	<view class="content">
		<!-- 初始信息 -->
		<view v-show="!doing">
			<!-- 提示 -->
			<view class="tip">
				<!-- 对号 -->
				<view class="icon"></view>
				<!-- 提示语 -->
				<view class="note">支付成功，请提枪加注</view>
				<!-- 金额 -->
				<view class="amount">
					<text class="icon-2">￥</text>
					<text class="num">{{total}}</text>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="order">
				<view class="item">
					<text class="left">订单编号：</text><text>{{info.recordCode}}</text>
				</view>
				<view class="item">
					<text class="left">加注地点：</text><text>{{info.siteName}}</text>
				</view>
				<view class="item">
					<text class="left">付款方式：</text>
					<text v-if="info.payType === 'payfree'">免单</text>
					<text v-else-if="info.payType === 'paybalance'">账户余额</text>
					<text v-else-if="info.payType === 'teambalance'">团队余额</text>
					<text v-else>微信支付</text>
				</view>
				<view class="item">
					<text class="left">加注车辆：</text><text>{{info.carNumber}}</text>
				</view>
				<view class="item">
					<text class="left">付款时间：</text><text>{{info.payTime}}</text>
				</view>
			</view>
		</view>
		
		<!-- 加注状态信息 -->
		<view class="status" v-show="doing">
			<view class="fill-info">
				当前加注尿素品牌为<text class="str">{{ureaType}}</text>
				<text v-if="sepType">，单价<text class="str">{{ureaPrice}}元/升</text></text>
			</view>
			<!-- 动态图 -->
			<view class="change">
				<view class="dongtu">
					<view class="wave">
						<text class="filled-tip" v-if="showTip">加注完成</text>
					</view>
					<view class="wave-mask" :style="{top: cirHeight}"></view>
				</view>
			</view>
			<!-- 数据变化 -->
			<view class="data-msg" v-if="sepType">
				<view class="item">
					<view class="t1">{{shootMoney}}</view>
					<view class="t2">加注金额（元）</view>
				</view>
				<view style="flex: 1;"></view>
				<view class="item">
					<view class="t1">{{shootAmount}}</view>
					<view class="t2">加注量（升）</view>
				</view>
			</view>
		</view>
		
		<!-- 登录提示 -->
		<sign-in></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					recordCode: ''
				},  //订单信息
				total: '',  //支付的金额
				recordNum: 0.01,  //提交的加注量
				doing: false,  //是否正在加注，true正在加注，false刚进入页面
				usingRate: 0,  //当值为0时，没有波浪填充，当值为1时，全部填充
				showTip: false,  //是否显示完成提示语
				sepType: true,  //是否为分离机型，若是，则显示单价、加注金额、加注量
				ureaPrice: '',  //尿素单价
				ureaType: '',  //尿素品牌
				shootAmount: '',  //实时加注量
				shootMoney: '',  //实时加注金额
				isShow: false,  //是否再次进入此页面
			}
		},
		computed: {
			cirHeight() {
				return (100 - 265 * this.usingRate) + 'rpx';
			}
		},
		onLoad(e) {
			this.play()
			this.getOrder();
			this.total = e.total;
			this.recordNum = parseFloat(e.recordNum);
			uni.$on('linkListen', this.linkListen);
			
		},
		onShow() {
			this.$socket.dispatch('check');
			if(this.isShow) {
				this.getInfo();
			} else {
				this.isShow = true;
			}
			this.$socket.commit('changeIsdidPage',{status:true});
		},
		onUnload() {
			uni.$off('linkListen', this.linkListen);
		},
		methods: {
			play() {
				if(!this.audioContext){
					this.audioContext = uni.createInnerAudioContext();
					this.volume = 1;
				}
				let src = 'http://img.etubang.com/group1/M00/00/4C/rBCky2CHaOaAVg4DAABSRH-cUB0197.mp3';
				this.audioContext.src = src;
				this.audioContext.play();
			},
			//显示loading
			showLoading() {
				uni.showLoading({
					mask: true,
					title: '加载中...'
				});
			},
			//监听webSocket
			linkListen(res) {
				console.log('socket',res);
				
				if(res.msgtype === 'filling') {
					this.lisFilling(res.data);
				} else if(res.msgtype === 'filled') {
					this.lisFilled(res.data);
				} else if(res.msgtype === 'fillreply') {
					if(!res.data.success) {
						this.$showToast(res.data.msg);
					}
				}
			},
			//实时加注状态
			lisFilling(res) {
				if(!this.doing) {
					this.doing = true;
					this.ureaType = res.ureaType;
					this.ureaPrice = res.ureaPrice;
					uni.setNavigationBarTitle({ title: '正在加注' });
				}
				this.shootMoney = res.shootMoney;
				this.shootAmount = res.shootAmount;
				this.usingRate = res.shootAmount / this.recordNum;
				if(this.usingRate >= 1) {
					this.showTip = true;
					this.showLoading();
				}
			},
			//订单完成(此时已完成整个加注操作，可以跳转完成页面)
			lisFilled(res) {
				this.usingRate = 1;
				this.showTip = true;
				this.showLoading();
				setTimeout(() => {
					uni.hideLoading();
					this.$store.commit('setTmpData', JSON.stringify(res));
					uni.redirectTo({ url: './did' });
				}, this.$tmp.TIME_SUC);
			},
			//获取订单信息，以在wensocket连接断开的情况下，获取加注的状态，加注中还是加注完成
			getInfo() {
				this.$http({
					url: this.$api.exchargeUrl + 'getpayinfobycode',
					data: {
						recordCode: this.info.recordCode,
						payClass: 'PayClass1'
					}
				}).then(res => {
					if(res.recordType === 'filled') {
						this.$store.commit('setTmpData', JSON.stringify(res));
						uni.redirectTo({ url: './did' });
					}
				});
			},
			//获取订单信息
			getOrder() {
				this.info = JSON.parse(this.$store.state.tmpData);
				this.sepType = this.info.screenType === 0 ? true : false;
				this.$store.commit('setTmpData', '');
			}
		}
	}
</script>

<style lang="scss">
	/* 加注状态信息 */
	.status {
		width: 750rpx;
		height: 100vh;
		background-color: $color-white;
	}
	.fill-info {
		width: 750rpx;
		text-align: center;
		color: $color-primary;
		font-size: 30rpx;
		margin-top: 70rpx;
		.str {
			font-weight: bold;
			color: $color-text-primary;
		}
	}
	/* 数据变化 */
	.data-msg {
		width: 750rpx;
		margin-top: 120rpx;
		padding: 0 100rpx;
		display: flex;
		flex-direction: row;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			.t1 {
				color: $color-text-primary;
				font-size: 72rpx;
				font-family: $font-family-num;
			}
			.t2 {
				margin-top: 30rpx;
				font-size: 30rpx;
				color: $color-primary;
			}
		}
	}
	/* 动态图 */
	.change {
		width: 750rpx;
		margin-top: 120rpx;
	}
	.dongtu {
		position: relative;
		margin: 0 auto;
		width: 235rpx;
		height: 235rpx;
		border-radius: 50%;
		background: #5BB8FF;
		border: 5rpx solid #5BB8FF;
		overflow: hidden;
		.wave {
			width: 235rpx;
			height: 235rpx;
			line-height: 235rpx;
			text-align: center;
			background-color: #5BB8FF;
			border-radius: 50%;
			.filled-tip {
				font-size: 30rpx;
				color: $color-white;
			}
		}
		.wave-mask {
			position: absolute;
			top: 0;
			left: 50%;
			width: 470rpx;
			height: 470rpx;
			border-radius: 40%;
			background-color: #fff;
			z-index: $z-index-public;
			transform: translate(-50%, -70%) rotate(0);
			animation: toRotate 5s linear 0s infinite;
		}
	}
	@keyframes toRotate {
		50% {
			transform: translate(-50%, -70%) rotate(180deg);
		}
		100% {
			transform: translate(-50%, -70%) rotate(360deg);
		}
	}
	
	/* 提示区 */
	.tip {
		width: 750rpx;
		padding-top: 70rpx;
		padding-bottom: 40rpx;
		background-color: $color-white;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 对号 */
		.icon {
			width: 117rpx;
			height: 117rpx;
			background-image: url('/static/wxImage/successful.png');
		}
		/* 提示语 */
		.note {
			color: $color-text-primary;
			font-size: 36rpx;
			margin-top: 36rpx;
		}
		/* 金额 */
		.amount {
			width: 100%;
			margin-top: 60rpx;
			text-align: center;
			.icon-2 {
				font-size: 40rpx;
			}
			.num {
				font-size: 72rpx;
				font-family: $font-family-num;
				font-weight: 500;
				margin-left: 15rpx;
			}
		}
	}
	/* 订单信息 */
	.order {
		width: 750rpx;
		margin-top: $spacing-col;
		padding: 35rpx 30rpx;
		background-color: $color-white;
		.item {
			display: flex;
			flex-direction: row;
			margin-top: 35rpx;
			color: $color-grey-dark;
			.left {
				flex: 1;
			}
		}
		.item:first-child {
			margin-top: 0;
		}
	}
</style>
